import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Card, Drawer, Form, Input, Modal, Radio, Space, Table, Tag } from "antd"
import { useState } from "react";
import { DELETE_PLAYER, GET_PLAYER, PATCH_PLAYER } from "../../api/requset";
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useResHook } from ".../../utils/useResponseHook";

// 封装action操作组件
function Actions({ player, refresh }) {
  // 设置模态框确定删除 
  // const [modal, contextHolder] = Modal.useModal();
  let confirm = () => {
    // 模态框弹窗
    Modal.confirm({
      title: '警告',
      // 图标为图标库中的组件，需要引入
      icon: <ExclamationCircleOutlined />,
      content: '删除后数据无法回复，请确认删除！！！',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        remove()
      }
    });
  }
  let remove = (id) => {
    console.log(id);
    DELETE_PLAYER(id).then((res) => {
      console.log(res);
      console.log("删除成功");
      // 调用页面刷新
      refresh();
    })
  }



  // 编辑edit
  // let [player, setPlayer] = useState([])
  let [open, setOpen] = useState(false)
  let edit = () => {
    setOpen(true)
  }

  let submit = async (values) => {
    let { id, ...data } = values
    let res = await PATCH_PLAYER(id, data)
    // console.log(res);
    // console.log(values);
    setOpen(false)
    refresh()
  }

  return (
    <>
      {/* {contextHolder} */}
      <Space>
        <Button type="primary" onClick={() => edit()}>编辑</Button>
        <Button type="primary" danger onClick={() => { confirm(player.id) }}>删除</Button>
      </Space>
      {/* open开关，onClose关闭事件 */}
      <Drawer open={open} onClose={() => setOpen(false)}>
        {/* 抽屉，实现编辑效果，抽屉中为from表单 */}
        <Form onFinish={submit} initialValues={player} layout="vertical">
          <Form.Item label="id" name="id">
            <Input readOnly></Input>
          </Form.Item >
          <Form.Item label="姓名" name="name">
            <Input></Input>
          </Form.Item>
          <Form.Item label="性别" name="gender">
            <Radio.Group >
              <Radio value={0}>男</Radio>
              <Radio value={1}>女</Radio>
            </Radio.Group>
            {/* <Input></Input> */}
          </Form.Item>
          <Form.Item label="年龄" name="age">
            <Input></Input>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">修改</Button>
          </Form.Item>
        </Form>

      </Drawer>
    </>

  );
}




function Page1() {

  // // 单个页面校验
  // let token = localStorage.getItem("token");
  // let navigate = useNavigate()
  // useEffect(() => {
  //   if (!token) {
  //     navigate('/login')
  //   }
  // }, [])


  // let [columns, setColumns] = useState([])
  // let [tableData, setTableData] = useState([])

  // 设置列数据
  let columns = [
    {
      title: '姓名',
      dataIndex: "name",
      key: "name"
    },
    {
      title: '性别',
      dataIndex: "gender",
      key: "gender",
      // render函数进行页面的渲染。实现复杂数据的渲染，参数分别为当前行的值，当前行数据，行索引
      render: (text, record) => text ? <Tag color={"green"}>女</Tag> : <Tag color={"geekblue"}>男</Tag>  // <span>{text}- {JSON.stringify(record)}</span>
    },
    {
      title: '年龄',
      dataIndex: "age",
      key: "age"
    },
    {
      title: '操作',
      dataIndex: "action",
      key: "action",
      render: (text, player) => {
        return (
          // <Space>
          //   <Button type="primary">编辑</Button>
          //   <Button type="primary" danger>删除</Button>
          // </Space>
          <Actions refresh={refresh} player={player} ></Actions>
        )
      }
    }
  ]
  // let tableData = [
  //   {
  //     key: 0,
  //     name: "张三",
  //     gender: 0,
  //     age: 18
  //   },
  //   {
  //     key: 1,
  //     name: "李四",
  //     gender: 1,
  //     age: 22
  //   },
  //   {
  //     key: 2,
  //     name: "王五",
  //     gender: 0,
  //     age: 21
  //   },
  //   {
  //     key: 3,
  //     name: "赵六",
  //     gender: 1,
  //     age: 23
  //   },
  // ]

  // let [data, setData] = useState([]);
  // let [loading, setLoading] = useState(false);
  // // 刷新函数
  // let [rsh, setRsh] = useState(false)
  // let refresh = () => {
  //   setRsh(!rsh)
  //   // console.log("刷新");
  // }
  // // 利用useEffect的原理实现页面的重新刷新
  // useEffect(() => {
  //   setLoading(true)
  //   GET_PLAYER().then((res) => {
  //     console.log(res);
  //     setLoading(false)
  //     setData(res.data)
  //   })
  // }, [rsh])

  // // 封装为一个hook，实现获取数据，页面刷新；传递请求的方法时不要传递函数调用，直接传递函数名，否则会执行多次调用请求
  let { data, loading, refresh } = useResHook(GET_PLAYER);





  // 创建存储用户源数据
  let playerData = data
  // let [playerData, setPlayerData] = useState([])
  // 筛选的搜索 let _data = data.filter(d => d.name.indexOf(value) > 0)
  let search = (value) => {

  }

  // 获取Search组件
  let { Search } = Input
  return (
    <Space style={{ padding: "20px", display: "flex" }} direction="vertical">
      <Card>筛选
        <Search style={{ width: '50%' }} placeholder="input search text" onSearch={search} enterButton />
        {/* <Input style={{ width: '50%' }} onPressEnter={search} placeholder="请根据用户名搜索"></Input> */}
      </Card>
      <Table rowKey="id" loading={loading} columns={columns} dataSource={data}></Table>
    </Space>
  );
}




export default Page1;